import React from 'react'
import { Button, Card, DatePicker, Form, Input, Select, Space, Table, Tag } from 'antd'

type TransferRecord = {
  key: React.Key
  index: number
  orderNo: string
  billStatus: '草稿' | '待审核' | '驳回' | '通过' | '已完成'
  applyDate: string
  type: string
  outWarehouse: string
  inWarehouse: string
  outStatus: '未出库' | '部分出库' | '已出库'
  inStatus: '未入库' | '部分入库' | '已入库'
  goods: string
  qty: number
  amount: number
  agent: string
  maker: string
  department: string
  makeTime: string
  reviewer: string
  reviewTime: string
}

const columns = [
  { title: '序号', dataIndex: 'index', width: 70, fixed: 'left' as const },
  { title: '调拨单号', dataIndex: 'orderNo', width: 140, fixed: 'left' as const },
  {
    title: '单据状态',
    dataIndex: 'billStatus',
    width: 100,
    fixed: 'left' as const,
    render: (text: TransferRecord['billStatus']) => {
      const color: Record<TransferRecord['billStatus'], string> = {
        草稿: 'default',
        待审核: 'orange',
        驳回: 'red',
        通过: 'blue',
        已完成: 'green'
      }
      return <Tag color={color[text]}>{text}</Tag>
    }
  },
  { title: '调拨申请日期', dataIndex: 'applyDate', width: 140 },
  { title: '调拨类型', dataIndex: 'type', width: 110 },
  { title: '调出仓库', dataIndex: 'outWarehouse', width: 120 },
  { title: '调入仓库', dataIndex: 'inWarehouse', width: 120 },
  { title: '出库状态', dataIndex: 'outStatus', width: 110 },
  { title: '入库状态', dataIndex: 'inStatus', width: 110 },
  { title: '调拨货品', dataIndex: 'goods', ellipsis: true },
  { title: '调拨数量', dataIndex: 'qty', width: 110 },
  { title: '调拨金额', dataIndex: 'amount', width: 120 },
  { title: '经办人', dataIndex: 'agent', width: 100 },
  { title: '制单人', dataIndex: 'maker', width: 100 },
  { title: '所在部门', dataIndex: 'department', width: 120 },
  { title: '制单时间', dataIndex: 'makeTime', width: 180 },
  { title: '审核人', dataIndex: 'reviewer', width: 100 },
  { title: '审核时间', dataIndex: 'reviewTime', width: 180 },
  {
    title: '操作',
    key: 'action',
    fixed: 'right' as const,
    width: 140,
    render: () => (
      <Space>
        <Button type="link" size="small">编辑</Button>
        <Button type="link" size="small">删除</Button>
        <Button type="link" size="small">撤销</Button>
      </Space>
    )
  }
]

const mockData: TransferRecord[] = Array.from({ length: 60 }).map((_, i) => ({
  key: i + 1,
  index: i + 1,
  orderNo: `DBDH${(8000 + i).toString().padStart(4, '0')}`,
  billStatus: (['草稿', '待审核', '驳回', '通过', '已完成'] as TransferRecord['billStatus'][])[i % 5],
  applyDate: '2024-02-29',
  type: '货品调拨',
  outWarehouse: '货品仓库一',
  inWarehouse: '货品仓库三',
  outStatus: (['未出库', '部分出库', '已出库'] as TransferRecord['outStatus'][])[i % 3],
  inStatus: (['未入库', '部分入库', '已入库'] as TransferRecord['inStatus'][])[i % 3],
  goods: '三锅头、可笑、何必等8项……',
  qty: 10,
  amount: 500,
  agent: '李依依',
  maker: ['甄惜梦','稚歆美','凄雨柏','宗政欣欣','乌雅恭','刑素怀','星飞虎','令乐','苟冰蝶','令狐丽泽'][i % 10],
  department: '仓储部',
  makeTime: '2024-02-29 21:37:33',
  reviewer: '赵子墨',
  reviewTime: '2024-02-29 21:37:33'
}))

export default function Allot() {
  const [form] = Form.useForm()

  const handleSearch = () => {
    const values = form.getFieldsValue()
    console.log('search:', values)
  }

  const handleReset = () => {
    form.resetFields()
  }

  return (
    <Space direction="vertical" size={12} style={{ width: '100%' }}>
      

      <Card bordered={false} bodyStyle={{ paddingBottom: 0 }}>
        <Form form={form} layout="inline" onFinish={handleSearch}>
          <Form.Item label="调拨单号" name="orderNo">
            <Input placeholder="请输入" allowClear style={{ width: 200 }} />
          </Form.Item>
          <Form.Item label="单据状态" name="billStatus">
            <Select
              placeholder="请选择"
              allowClear
              options={[
                { label: '草稿', value: '草稿' },
                { label: '待审核', value: '待审核' },
                { label: '驳回', value: '驳回' },
                { label: '通过', value: '通过' },
                { label: '已完成', value: '已完成' }
              ]}
              style={{ width: 140 }}
            />
          </Form.Item>
          <Form.Item label="出入库状态" name="flowStatus">
            <Select
              placeholder="请选择"
              allowClear
              options={[
                { label: '未出库/未入库', value: 'none' },
                { label: '部分出入库', value: 'part' },
                { label: '已出入库', value: 'done' }
              ]}
              style={{ width: 160 }}
            />
          </Form.Item>
          <Form.Item label="调拨申请日" name="applyDate">
            <DatePicker style={{ width: 160 }} />
          </Form.Item>

          <Space style={{ marginLeft: 'auto', marginBottom: 16 }}>
            <Button onClick={handleReset}>重置</Button>
            <Button type="primary" htmlType="submit">查询</Button>
          </Space>
        </Form>
      </Card>

      <Card bordered={false} bodyStyle={{ paddingTop: 12 }}>
        <Space style={{ marginBottom: 12 }} wrap>
          <Button type="primary">新增</Button>
          <Button danger>删除</Button>
          <Button>复制</Button>
          <Button>审核</Button>
          <Button>撤销</Button>
          <Button>导出</Button>
          <Button>刷新</Button>
        </Space>

        <Table
          rowSelection={{}}
          columns={columns as any}
          dataSource={mockData}
          bordered
          size="middle"
          pagination={{
            pageSize: 10,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: [10, 20, 50],
            showTotal: (t) => `共 ${t} 条`
          }}
          scroll={{ x: 2000 }}
        />
      </Card>
    </Space>
  )
}
